<template>
	<view class="content" style="position: relative;">
		<u-button type="primary" style="width: 50px; position: absolute; top:10px; right: 10px;" @click="gotologin"
			v-if="!tokessa && tokessa.length!==32">登录</u-button>
		<u-button type="primary" style="width: 50px; position: absolute; top:10px; right: 10px;" @click="outtologin"
			v-if="tokessa && tokessa.length==32">退出</u-button>
		<u-button type="primary" style="width: 50px; position: absolute; top:70px; right: 10px;" @click="gotomanageer"
			v-if="tokessa && tokessa.length==32">博客</u-button>
		<!-- <u-button type="primary" style="width: 50px; position: absolute; top:130px; right: 10px;"
			@click="gotomanageeruser" v-if="tokessa && tokessa.length==32">用户</u-button> -->
		<u-modal v-model="show" @confirm="confirm" style="text-align: center; padding: 20px 0;"
			:show-cancel-button="true">是否退出登录</u-modal>
		<view class="autoheight">
			<view class="titles">Z-BOOT博客系统</view>
			<view class="searce">
				<u-input v-model="searches" :focus="true" :border="true" placeholder="请输入搜索内容" class="bg" :trim="true"
					@input="autoplays" :clearable="false" />
			</view>
			<view class="datalist">
				<view class="list" v-for="(item,index) in datalist" :key="index">
					<view class="categrouy">{{item.cname}}</view>
					<view style="flex: 1;" @click="gotoinfo(item.Id)">{{item.title}}</view>
					<view style="flex: 1;">{{item.creattime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	import api from '../../api/api.js';
	export default {
		computed: {
			...mapGetters(['leftWinActive', 'colorList'])
		},
		data() {
			return {
				searches: '',
				tokessa: '',
				show: false,
				datalist: []
			}
		},
		onLoad() {
			this.autoplays();
			this.tokessa = uni.getStorageSync('token');
		},
		methods: {
			autoplays(evne) {
				var datras = {
					searches: this.searches,
					uid:uni.getStorageSync('uid')
				}
				api.indexdata(datras).then((res) => {
					this.datalist = res.data;
				})
			},
			gotologin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			outtologin() {
				this.show = !this.show;
			},
			confirm() {
				uni.setStorageSync('token', '');
				uni.setStorageSync('uid', '');
				api.outlogin().then((res) => {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				})
			},
			gotomanageer() {
				uni.navigateTo({
					url: "/pages/manage/index"
				})
			},
			gotomanageeruser() {
				uni.navigateTo({
					url: "/pages/manage/usermanager"
				})
			},
			gotoinfo(Id){
				uni.navigateTo({
					url: "/pages/index/pages?Id="+Id
				})
			}
		},
		onShow: function() {
			console.log('App Show')
			this.tokessa = uni.getStorageSync('token');
			if (!this.tokessa) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		},
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: #27ae60;
		display: flex;
		flex-direction: column;
	}

	.autoheight {
		width: 100vw;
		height: 100vh;
		overflow-x: scroll;
		padding-bottom: 150px;
	}

	.titles {
		width: 100%;
		height: 30PX;
		line-height: 30PX;
		text-align: center;
		font-size: 30px;
		color: #fff;
		margin-top: 30px;
	}

	.searce {
		width: 60%;
		text-align: center;
		font-size: 18px;
		color: #fff;
		margin-top: 40px;
		margin-left: 20%;
		overflow: hidden;
		padding: 20px 0;
	}

	.bg {
		background-color: #fff;
	}

	.datalist {
		margin-top: 20px;
		background-color: #fff;
		border-radius: 15px;
		min-height: 300px;
		width: 60%;
		margin-left: 20%;
		padding: 10px;
		box-sizing: border-box;
	}

	.list {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #CCCCCC;
		width: 90%;
		margin-left: 5%;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 30px;
	}

	.categrouy {
		flex: none;
		width: 100px;
	}
</style>
